<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--引入CSS-->
  <link rel="stylesheet" type="text/css" href="#(CTX)/js/plugins/webuploader/webuploader.css">
  <title>Title</title>
</head>
<body>
  <div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
      <div id="picker">选择文件</div>
      <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
  </div>

  <!--引入JS-->
  <script src="#(CTX)/js/jquery.min.js?v=2.1.4"></script>
  <script type="text/javascript" src="#(CTX)/js/plugins/webuploader/webuploader.js"></script>
  <script>
    var uploader = WebUploader.create({

      // swf文件路径
      swf: '#(CTX)/js/plugins/webuploader/Uploader.swf',

      // 文件接收服务端。
      server: '#(CTX)/core/attachment/upload',

      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick: '#picker',

      // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
      resize: false
    });

    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
      $("#thelist").append( '<div id="' + file.id + '" class="item">' +
          '<h4 class="info">' + file.name + '</h4>' +
          '<p class="state">等待上传...</p>' +
          '</div>' );
    });

    uploader.on( 'uploadSuccess', function( file ) {
      $( '#'+file.id ).find('p.state').text('已上传');
    });

    uploader.on( 'uploadError', function( file ) {
      $( '#'+file.id ).find('p.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
      $( '#'+file.id ).find('.progress').fadeOut();
    });

    $("#ctlBtn").click(function(){
      uploader.upload();
    });

  </script>
</body>
</html>